<template>
  <div id="flightTickets">
    <div class="card">
      <div class="card-header bg-info text-white">供应商统计</div>
      <div class="card-body py-1">
        <form class="row row-cols-lg-auto align-items-center">
          <label>日期类型</label>
          <div class="col-2">
            
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="0"
                v-model.number="dateType"
              />
              <label class="form-check-label">账单日期</label>
            </div>
            <div class="form-check form-check-inline">
              <input
                class="form-check-input"
                type="radio"
                value="1"
                v-model.number="dateType"
              />
              <label class="form-check-label">审核日期</label>
            </div>
          </div>
          <label>开始日期</label>
          <div class="col-1">
            
            <my-date-picker
              id="beginDate"
              v-model="beginDate"
              placeholder="开始日期"
              sizing="sm"
            ></my-date-picker>
          </div>
           <label>截止日期</label>
          <div class="col-1">
           
            <my-date-picker
              id="endDate"
              v-model="endDate"
              placeholder="截止日期"
              sizing="sm"
            ></my-date-picker>
          </div>
          <div class="col">
            <button
              type="button"
              class="btn btn-primary ms-1"
              @click.stop="searchStats()"
            >
              统计
            </button>

            <a
              class="btn btn-success ms-5"
              @click.stop="download()"
              href="javascript:void(0)"
              >下载</a
            >
          </div>
        </form>
      </div>
    </div>
    <div class="card-body py-0 bg-info text-warning text-center">账单</div>

    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link" id="home-tab" data-bs-toggle="tab" href="#data-list"
          >列表</a
        >
      </li>
      <li class="nav-item">
        <a
          class="nav-link active"
          id="profile-tab"
          data-bs-toggle="tab"
          href="#data-picture"
          >图形</a
        >
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade" id="data-list">
        <table class="table table-sm table-striped">
          <thead>
            <tr>
              <th></th>
              <th>供应商</th>
              <th></th>
              <th class="text-end d-none d-md-table-cell">数量</th>
              <th class="text-end">总金额</th>
              <th class="text-end d-none d-md-table-cell">总成本</th>
              <th class="text-end d-none d-md-table-cell">未付成本</th>
              <th class="text-end">总利润</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(info, index) in dataList">
              <tr :key="index">
                <td class="text-end">{{ index + 1 }}</td>
                <td class="">
                  <template v-if="info.supplier !== null">{{
                    info.supplier.name
                  }}</template>
                </td>
                <td></td>
                <td class="text-end d-none d-md-table-cell">
                  {{ info.count }}
                </td>
                <td class="text-end">{{ info.totalAmount }}</td>
                <td class="text-end d-none d-md-table-cell">
                  {{ info.totalCost }}
                </td>
                <td class="text-end text-danger d-none d-md-table-cell">
                  {{ info.unpaidTotalCost }}
                </td>
                <td class="text-end">{{ info.totalProfit }}</td>
              </tr>
              <template v-for="(item, itemIndex) in info.items">
                <tr :key="`Detail` + index + `-` + itemIndex">
                  <td class="text-end"></td>
                  <td class=""></td>
                  <td>{{ item.billTypeName }}</td>
                  <td class="text-end d-none d-md-table-cell">
                    {{ item.count }}
                  </td>
                  <td class="text-end">{{ item.totalAmount }}</td>
                  <td class="text-end d-none d-md-table-cell">
                    {{ item.totalCost }}
                  </td>
                  <td class="text-end text-danger d-none d-md-table-cell"></td>
                  <td class="text-end">{{ item.totalProfit }}</td>
                </tr>
              </template>
            </template>

            <tr v-if="count > 0">
              <td colspan="3">合计：</td>
              <td class="text-end d-none d-md-table-cell">{{ count }}</td>
              <td class="text-end">{{ totalAmount }}</td>
              <td class="text-end d-none d-md-table-cell">{{ totalCost }}</td>
              <td class="text-end d-none d-md-table-cell"></td>
              <td class="text-end">{{ totalProfit }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="tab-pane fade show active" id="data-picture">
        <ve-pie :data="chartData" :settings="chartSettings"></ve-pie>
      </div>
    </div>
  </div>
</template>

<script>
import { APP_FLIGHT_PATH } from "@/common/common.js";
import { searchSupplierStats } from "@/api/report.js";
import { today } from "@/common/common.js";
import MyDatePicker from "@/components/my-datepicker.vue";
import VePie from "v-charts/lib/pie";

export default {
  components: {
    MyDatePicker,
    VePie,
  },
  data() {
    return {
      dataList: [],
      dateType: 0,
      beginDate: "",
      endDate: "",
      count: 0,
      totalAmount: 0,
      totalCost: 0,
      totalProfit: 0,
      chartSettings: {
        limitShowNum: 5,
      },
      chartData: {
        columns: ["供应商", "机票数量"],
        rows: [
          { 日期: "1月1日", 销售量: 123 },
          { 日期: "1月2日", 销售量: 1223 },
          { 日期: "1月3日", 销售量: 2123 },
          { 日期: "1月4日", 销售量: 4123 },
          { 日期: "1月5日", 销售量: 3123 },
          { 日期: "1月6日", 销售量: 7123 },
        ],
      },
    };
  },
  mounted: function () {
    if (window.matchMedia("(max-width: 576px)").matches) {
      this.$router.replace("/h5/report/stat/supplier");
    } else {
      this.endDate = today();
      this.beginDate = this.endDate.substr(0, 8) + "01";
      this.chartData.rows.splice(0);
    }
  },
  methods: {
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    searchStats: function () {
      if (this.beginDate === "" || this.endDate === "") return;

      this.reset();

      const params = {
        dateType: this.dateType,
        beginDate: this.beginDate,
        endDate: this.endDate,
      };

      this.showLoading();

      searchSupplierStats(
        params,
        (v) => {
          this.dataList = v;
          for (const info of this.dataList) {
            this.count += info.count;
            this.totalAmount += info.totalAmount;
            this.totalCost += info.totalCost;
            this.totalProfit += info.totalProfit;
          }

          this.totalAmount = Math.round(this.totalAmount * 100) / 100;
          this.totalCost = Math.round(this.totalCost * 100) / 100;
          this.totalProfit = Math.round(this.totalProfit * 100) / 100;

          this.fillPie();
        },
        () => {
          this.hideLoading();
        }
      );
    },
    fillPie: function () {
      this.chartData.rows.splice(0);
      for (const info of this.dataList) {
        this.chartData.rows.push({
          供应商: info.supplier.name,
          机票数量: info.count,
        });
      }
    },
    reset: function () {
      this.count = 0;
      this.totalAmount = 0;
      this.totalCost = 0;
      this.totalProfit = 0;
    },
    download: function () {
      const params =
        "dateType=" +
        this.dateType +
        "&beginDate=" +
        this.beginDate +
        "&endDate=" +
        this.endDate;
      const url =
        APP_FLIGHT_PATH + "/report/supplier/statistic/download?" + params;
      window.open(url);
    },
  },
};
</script>
